<template>
  <!-- 导航栏 -->
  <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="back" />

  <!-- 订单列表 -->
  <van-tabs v-model:active="active" sticky @change="SwitchOrder">
    <van-tab v-for="(item,index) in statuslist" :title="item.title">
      <!-- 订单列表 -->
      <van-swipe-cell v-for="(order,key) in orderlist">
        <van-card :price="order.total" :desc="'商品名称：' + order.product.name" :title="'订单号：' + order.code"
          :thumb="order.product.cover_cdn">

          <!-- 订单状态 -->
          <template #num>
            <van-tag plain type="danger">{{order.status_text}}</van-tag>
          </template>

          <!-- 下单时间 -->
          <template #tags>
            下单时间：{{order.createtime}}
          </template>

          <!-- 按钮 -->
          <template #footer>
            <!-- 订单详情 -->
            <van-button size="mini" @click="ToInfo(order.id)">订单详情</van-button>

            <!-- 申请退款 -->
            <van-button type="danger" v-if="order.status < 4  && order.status != -1 " size="mini"
              @click="ToBack(order.id)">申请退款</van-button>

            <van-button @click="ToSales(order.id)" type="warning" v-if="order.status == -1 " size="mini">退货详情
            </van-button>

            <!-- 确认收货 -->
            <van-button type="success" v-if="order.status == 2" size="mini" @click="ToConfirm(order.id)">确认收货
            </van-button>

            <!-- 待评价 -->
            <van-button type="warning" v-if="order.status == 3" size="mini" @click="ToComment(order.id)">待评价
            </van-button>

            <!-- 查看物流 -->
            <van-button type="danger" v-if="order.status >=2" size="mini" @click="ToExpress(order.id)">查看物流</van-button>
          </template>

        </van-card>

      </van-swipe-cell>
      <!-- 底部弹出层 -->
      <van-popup v-model:show="show" position="bottom">
        <van-picker title="退货类型" :columns="areaList" @cancel="cancel" @confirm="confirm" />
      </van-popup>
    </van-tab>
  </van-tabs>
</template>
<script>

  export default {
    name: 'OrderIndex',
    created() {
      this.OrderData()
    },
    data() {
      return {
        active: 0,       //底部默认选中下标
        orderlist: [],
        show: false,
        areaList: ['仅退款', '退货退款'],
        LoginUser: this.$cookies.get('LoginUser'),
        active: 0,
        orderid: 0,
        statuslist: [
          { status: 0, title: '全部' },
          { status: 1, title: '待发货' },
          { status: 2, title: '待收货' },
          { status: 3, title: '待评价' },
          { status: 4, title: '已评价' },
          { status: -1, title: '已退货' },
        ]
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },

      // 切换分类
      SwitchOrder(name, title) {
        this.active = name
        this.OrderData()
      },

      // 查看订单详情 进入订单详情界面
      ToInfo(orderid) {
        this.$router.push({
          path: "/user/order/info",
          query: {
            orderid: orderid
          }
        })
      },


       // 查看退货详情
      ToSales(orderid) {
        this.$router.push({
          path: "/user/order/sales",
          query: {
            orderid: orderid
          }
        })
      },

      // 确认收货
      async ToConfirm(orderid) {
        var data = {
          userid: this.LoginUser.id,
          orderid: orderid
        }

        this.$dialog.confirm({
          message: '是否确认收货'
        }).then(async () => {

          var result = await this.$api.OrderConfirm(data)

          if (result.code == 0) {
            this.$notify({
              message: result.msg,
              duration: 1000,
            })
          } else {
            this.$notify({
              type: 'success',
              message: result.msg,
              duration: 1000,
            })
          }

          //要重新刷新一下订单列表
          this.OrderData()

        }).catch(() => { })
      },

      // 待评论 进入评论界面
      ToComment(orderid) {
        this.$router.push({
          path: '/user/order/comment',
          query: {
            orderid: orderid
          }
        })
      },

      // 获取订单列表
      async OrderData() {
        var data = {
          userid: this.LoginUser.id,
          status: this.active
        }

        var result = await this.$api.OrderIndex(data)

        this.orderlist = result.data
      },

      // 申请退款
      async ToBack(orderid) {
        this.orderid = orderid
        this.$dialog.confirm({
          message: '是否确认申请退款'
        }).then(async () => {
          this.showPopup();

        }).catch(() => { })
      },

      // 查看物流
      ToExpress(orderid) {
        this.$router.push({
          path: '/user/order/express',
          query: {
            orderid: orderid
          }
        })
      },

      // 选择退款类型显示弹出层
      showPopup() {
        this.show = true
      },

      // 取消弹出层
      cancel() {
        this.show = false
      },
      
      // 确认弹出层
      async confirm(value) {
        this.show = false
        if (value == "仅退款") {
          value = 1
        } else {
          value = 2
        }

        // 组装数据
        var data = {
          userid: this.LoginUser.id,
          orderid: this.orderid,
          type: value
        }
        var result = await this.$api.OrderBack(data)

        if (result.code == 0) {
          this.$notify({
            message: result.msg,
            duration: 1000,
          })
        } else {
          this.$notify({
            type: 'success',
            message: result.msg,
            duration: 1000,
          })
        }

         //要重新刷新一下订单列表
        this.OrderData()
      }

    },
  }
</script>